<template>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="name" name="username" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '最少两个字' }]" />
            <van-field v-model="phone" type="text" name="phone" label="手机号" placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />

            <van-field v-model="pwd" type="text" name="pwd" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />


            <div class="imgs">
                更换头像 <van-uploader :after-read="afterRead" /><img :src="imgurl" alt="">

            </div>
            <van-field v-model="title" type="text" name="title" label="签名" placeholder="签名"
                :rules="[{ required: true, message: '请填写签名' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
import {userupdate} from '@/api/index'
import { ref } from 'vue';
import { showToast } from 'vant';
let store = useStore()
const name = ref('');
name.value = store.state.userData[0].name
const phone = ref('');
phone.value = store.state.userData[0].phone
const pwd = ref('');
pwd.value = store.state.userData[0].pwd
const title = ref('');
title.value = store.state.userData[0].title
let imgurl = ref(store.state.userData[0].imgurl)
const afterRead = (file: any) => {
    imgurl.value = file.content
};
const onSubmit = (values: any) => {
    userupdate(name.value,pwd.value,phone.value,imgurl.value,title.value,store.state.userData[0].id).then((result:any) => {
        showToast('修改成功')
        store.commit('updateUserData',result.data.data)
       localStorage.setItem('userData',JSON.stringify(result.data.data))
       history.back()

    }).catch((err) => {
        showToast('网络错误')
    });
    
    // 
};
</script>

<style lang="less" scoped>

.van-nav-bar .van-icon{
    color: #333333;
}
.van-nav-bar__text{
    color: #333333;
}
.imgs {
    margin-top: 30rem;
    display: flex;
    align-items: center;
    margin-top: 40rem;
    margin-left: 20rem;

    img {
        margin-top: -8rem;
        background-color: rgb(247, 248, 250);
        width: 80rem;
        height: 80rem;
    }
}
</style>